<template>
  <view class="page" v-cloak>
    <!-- 自定义头部start -->
    <view class="cu-custom">
      <view class="cu-bar fixed"
        :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px', backgroundColor: 'rgba(255,255,255,' + scrollTop / 100 + ')' }]">
        <view class="action" @tap="back"><text class="cuIcon-back"></text></view>
        <view class="content" :style="[{ top: StatusBar + 'px' }]" v-if="scrollTop > CustomBar">{{i18n['商品详情']}}</view>
      </view>
    </view>
    <!-- 自定义头部end -->

    <!-- 图片轮播图 start -->
    <view id="banners" class="banners">
      <swiper class="carousel" :indicator-dots="false" :circular="true" @change="changeSwiper">
        <block v-for="(item, index) in swipers" :key="index">
          <swiper-item @click="preview(item, swipers)">
			  <fu-image :src="item" mode="aspectFill"></fu-image>
          </swiper-item>
        </block>
      </swiper>
      <view class="pagination">{{ curSwiper }}/{{ swipers.length }}</view>
    </view>
    <!-- 图片轮播图 end -->
    <!-- 悬浮Tab栏 start -->
    <view class="tabs" v-if="scrollTop > CustomBar" :style="{ opacity: opacity,top: CustomBar+'px' }">
      <block v-for="item in tabs" :key="item.title">
        <view class="flex-sub flex justify-center align-center" @tap="changeTab(item)">
          <view class="tab-item" :class="{ active: curTab == item.id }">{{
            item.title
            }}</view>
        </view>
      </block>
    </view>
    <!-- 悬浮Tab栏 end -->
    <!-- 商品信息展示区 start-->
    <view class="infos padding bg-white">
      <view class="text-lg text-333 word-break-all">{{ goodsInfo.name }}</view>
      <view class="flex justify-between align-center margin-top-sm">
        <text class="text-sm text-999 word-break-all">
          <text v-if="selectAll.is_pure_integral">
            <text class="text-xl fu-cred text-bold font-size-weight">{{ selectAll.sales_integral}}</text>
            <text class="text-sm ">{{i18n['积分']}}</text>
          </text>
          <text v-else>
            <text>
              <text class="text-osd fu-cred text-bold font-size-weight">{{ selectAll.sales_integral}}</text>
              <text class="text-sm fu-cred margin-left-xs ">{{i18n['积分']}}</text>
            </text>
            <text style="padding:0 10rpx;">+</text>
            <text>
              <text class="text-price fu-cred"></text>
              <text class="fu-cred text-bold font-size-weight">{{ selectAll.activity_price}}</text>
            </text>
          </text>
        </text>
        <view class="cu-btn bg-theme bottoms round block margin-top" v-if="user_score >= selectAll.sales_integral"
          @tap="redeem">
          {{i18n['立即兑换']}} </view>
        <view class="cu-btn  nobottoms round block margin-top" v-else> {{i18n['积分不足']}} </view>
      </view>
    </view>
    <!-- 商品信息展示区 end -->
    <!-- 规格,地址,服务,参数 -->
    <view class="margin-top-sm bg-white radius-20 padding-lr">
      <!-- 规格 start -->
      <view class="list-item" @tap="openPopup('specs')" v-if="goodsInfo.is_spec">
        <view class="title">{{i18n['规格']}}</view>
        <view class="content solid-bottom">
          <view class="mes text-df text-333 text-cut">
            <text v-if="sku_name">{{ sku_name }}，</text> {{ goodsInfo.number }}{{i18n['件']}}
          </view>
          <view class="icon">
            <text class="cuIcon-right text-999" style="font-size: 24rpx"></text>
          </view>
        </view>
      </view>
      <!-- 规格 end -->
      <!-- 地址 start -->
      <view class="list-item" @tap="switchAddress(addrs.length)" v-if="curAddr">
        <view class="title">{{i18n['送至']}}</view>
        <view class="content solid-bottom">
          <view class="mes text-df text-333 text-cut">
            <text class="cuIcon-locationfill fu-cred"></text>
            <text class="margin-left-xs" v-if="addrs.length > 0">{{ curAddr.province }}{{ curAddr.city }}{{
              curAddr.district
              }}{{ curAddr.address }}</text>
            <text v-else>{{i18n['添加地址信息']}}</text>
          </view>
          <view class="icon">
            <text class="cuIcon-right text-999" style="font-size: 24rpx"></text>
          </view>
        </view>
      </view>
      <!-- 地址 end -->
      <!-- 优惠start -->
<!--      <view class="list-item" @tap="switchFreight">
        <view class="content">
          <view class="title">运费</view>
          <view class=" solid-bottom flex justify-end">
            <view class="mes text-df text-333 text-cut freight-text" >运费说明</view>
            <view class="icon"><text class="cuIcon-right text-999" style="font-size: 24rpx;"></text></view>
          </view>
        </view>
      </view> -->
      <!-- 优惠end -->
    </view>
    <!-- 评价展示区 start-->
    <view id="evaluates" class="evaluates margin-top-sm radius-20 bg-white padding-lr">
      <view class="title flex justify-between align-center" @tap="navToComment">
        <text>
          <text class="text-lg text-333">{{i18n['商品评价']}}</text>
          <text class="text-333 text-df margin-left-xs">({{ comment_total }})</text>
        </text>
        <text>
          <text class="text-sm text-333" v-if="goodsInfo.praise_rate || goodsInfo.praise_rate == 0">{{ i18n['好评率'] + goodsInfo.praise_rate + '%' }}</text>
          <text class="text-sm text-999" v-else>{{i18n['查看全部']}}</text>
          <!-- <text class="text-sm text-999">查看全部</text> -->
          <text class="cuIcon-right text-999 margin-left-xs" style="font-size: 24rpx"></text>
        </text>
      </view>
      <view class="content" v-if="comment.length > 0">
        <block v-for="(item, index) in comment" :key="index">
          <fu-evaluate :prop="item"></fu-evaluate>
        </block>
      </view>
    </view>
    <!-- 评价展示区 end-->
    <!-- 商品详情 start -->
    <view id="details" class="details radius-20 bg-white margin-top-sm">
      <view class="title">
        <view class="icon icon1"></view>
        <view class="margin-lr">{{i18n['商品详情']}}</view>
        <view class="icon icon2"></view>
      </view>
      <view class="padding-lr padding-bottom word-break-all">
        <jyf-parser :html="body"></jyf-parser>
      </view>
    </view>
    <!-- 商品详情 end -->
    <!-- 地址弹窗  start-->
    <fu-goods-address ref="address" :addrs="addrs" @change="changeAddress"></fu-goods-address>
    <!-- 地址弹窗  end-->
    <!-- 规格弹窗 start-->
    <fu-specs-popup ref="specs" :speclist="spec_list" :skulist="sku_list" :currentId="sku_id" :info="goodsInfo"
      :limit="limit" @changeNumber="setNumber" @changeSpec="setSpec" @buyNow="buyNow"></fu-specs-popup>
    <!-- 规格弹窗 end-->
    <!-- 运费说明弹窗 -->
    <fu-explain :info="freight_explain" :title="i18n['运费说明']" ref="explain"></fu-explain>
    <!-- 网络监测 start -->
    <fu-notwork></fu-notwork>
    <!-- 网络监测 end -->
  </view>
</template>

<!--
is_pure_integral 是否纯积分兑换
1 :纯积分兑换
0 :积分加 钱计算
-->

<script>
  import { SHAREURL } from '@/common/config.js';
  import richText from '@/common/utils/richText.js';
  import fuEvaluate from '../../components/fu-evaluate/fu-evaluate.vue';
  import fuGoodsAddress from '../../components/fu-goods-address/fu-goods-address.vue';
  import fuSpecsPopup from '../../components/fu-specs-popup/fu-specs-popup.vue';
  import fuExplain from '../../components/fu-explain/index.vue';
  export default {
    name: 'integral-goods-detail',
    components: {
      fuEvaluate,
      fuGoodsAddress,
      fuSpecsPopup,
      fuExplain
    },
    data() {
      return {
        is_pure_integral: 0,
        user_score: 0, //当前可用积分
        selectAll: {}, //选择了那个规格  不同的规格对应的价格不同
        curSwiper: 1, // 当前轮播图index
        tabs: [{
          title: global.i18n["宝贝"],
          id: "banners",
        },
        {
          title: global.i18n["评价"],
          id: "evaluates",
        },
        {
          title: global.i18n["详情"],
          id: "details",
        },
        ], //商品详情分类导航
        number: 1, //兑换数量
        StatusBar: this.StatusBar, //状态栏高度
        CustomBar: this.CustomBar, //标题栏高度
        curTab: "banners", //显示那个轮播图
        scrollTop: 0, // 距离顶部高度    用来计算显示顶部导航
        opacity: 0, //来设置顶部导航的透明度
        swipers: [], // 轮播图
        goodsInfo: {}, // 商品信息
        spec_list: [], // 规格列表
        sku_list: [], // 规格参照列表
        sku_id: 0, // 当前规格id
        sku_name: "", //  当前规格名称
        goods_id: 0, // 商品id
        activity_id: 0, //活动id
        body: "", // 商品介绍
        comment: [], // 评论列表
        comment_total: 0, // //评论条数
        activityInfo: {}, // 活动信息
        limit: 0, // 限购数量
        addrs: [], //地址列表
        curAddr: {}, //选择的当前地址
        downInfo: {}, //活动内容
        freight_explain: '', //{String} 运费说明
        explain_title: '', //{String}运费说明标题
        shareCode: '', //{String}分享的图片路径
        shareUrl: '', //{String}分享的地址路径
      };
    },
    /**
     * @description 页面初始化
     * @param {Object} options goods_id：商品id  activity_id：活动id  sku_id:规格id
     */
    onLoad(options) {
      const {
        goods_id,
        activity_id = 0,
        sku_id = 0,
      } = options;
      this.goods_id = goods_id;
      this.sku_id = sku_id;
      this.activity_id = activity_id;
      // this.user_score = this.$store.state.userInfo.score //当前可使用积分
      // console.log(this.user_score)
    },
    /**
     * @description 若已经登录获取地址信息
     */
    onShow() {
      if (global.token) {
        this.loadAddress();
        this.getIntegralInfo();
      }
    },
    /**
     * @description 页面滚动事件
     * @param {Object} e 获取已经滚动的高度(距离顶部)
     */
    onPageScroll(e) {
      let top = e.scrollTop;
      let navH = 115 + this.StatusBar;
      this.scrollTop = top;
      this.opacity = (top / 100).toFixed(2);

      if (top >= 0 && top <= this.tabs[1].top - navH) {
        this.curTab = 'banners';
      } else if (top >= this.tabs[1].top - navH && top < this.tabs[2].top - navH) {
        this.curTab = 'evaluates';
      } else if (top >= this.tabs[2].top - navH) {
        this.curTab = 'details';
      }
    },
    /**
     *@description 下拉加载重新刷新
     */
    onPullDownRefresh() {
      this.loadData();
    },
    methods: {
      /**
       * @event
       * @description  获取二维码
       * @param {Number} goods_id 商品id
       * @param {Number} activity_id 活动id
       * @param {Number} sku_id 规格id
       */
      getShareCode() {
        // #ifdef MP-WEIXIN
        let data = {
          a: this.goods_id,
          b: this.activity_id || 0,
          c: this.sku_id || 0
        };
        console.log('我分享的参数', data);
        let dataStr = this.$util.serialize(data);
        let page = 'pages/integral/integralgoods/ntegral-goods-detail/index';
        this.$api
          .post(global.apiUrls.postShareCode, {
            page: page,
            scene: dataStr,
            width: 180
          })
          .then(res => {
            console.log('分享二维码', res);
            if (res.data.code == 1) {
              let data = res.data.data.base64;
              this.$util
                .base64ToPath(data)
                .then(res => {
                  console.log('图片临时路径', res);
                  this.shareCode = res;
                  this.$refs.share.init();
                })
                .catch(err => {
                  console.log('保存临时二维码失败', err);
                  this.$message.info(this.i18n['保存临时二维码失败']);
                });
            } else {
              this.$message.info(this.i18n['获取分享二维码失败']);
            }
          })
          .catch(err => {
            console.log('获取分享二维码失败', err);
          });
        // #endif
        // #ifndef MP-WEIXIN
        this.$api
          .post(global.apiUrls.postAppShareCode, {
            goods_id: this.goods_id,
            activity_id: this.activity_id || 0,
            sku_id: this.sku_id || 0
          })
          .then(res => {
            let data = res.data;
            console.log('Appfenxiang ', data);
            if (data.code == 1) {
              let url = data.data.qrcode_url;
              let href = data.data.url;
              console.log('二维码路径', url);
              this.shareCode = url;
              this.shareUrl = href;
              this.$refs.share.init();
            } else {
              this.$message.info(this.i18n['获取分享二维码失败']);
            }
          })
          .catch(err => {
            console.log(err);
          });
        // #endif

      },
      /**
       * @event
       * @description  打开运费弹窗
       */
      switchFreight() {
        this.openPopup('explain');
      },
      /**
       * @event
       * @description  点击图片放大
       * @param {String} item 当前图片url
       * @param {Array} urls 图片url
       */
      preview(item, urls) {
        uni.previewImage({
          current: item,
          urls: urls
        });
      },
      /**
       * @description 获取积分统计
       */
      getIntegralInfo() {
        this.$api
          .get(global.apiUrls.getMyMoney)
          .then((res) => {
            console.log("金额信息: ", res);
            if (res.data.code == 1) {
              this.user_score = res.data.data.score;
              this.loadData();
            } else {
              this.$message.info(res.data.msg);
            }
          })
          .catch((err) => {
            console.log("err: " + JSON.stringify(err));
          });
      },
      /**
       * @description 点击立即兑换
       */
      redeem() {
        if (this.goodsInfo.stock == 0) return this.$message.info(this.i18n['该商品已兑换完了,看看其它的吧']);
        if (this.number > this.goodsInfo.stock) return this.$message.info(this.i18n['兑换数量超过商品上限']);
        this.close();
        this.buyNow()
      },
      /**
       * @description 关闭选择规格的弹框
       */
      close() {
        if (this.$refs.number) {
          this.$refs.number.close()
        }

      },
      /**
       * @description 改变购买商品的数量
       * @param {Object} value 购买商品的数量
       */
      changeNumber(value) {
        this.number = value;
      },

      /**
       * @description 返回上一个页面
       */
      back() {
        uni.navigateBack();
      },
      /**
       * @description 轮播图切换
       * @param {Object} e 获取滚动的序号
       */
      changeSwiper(e) {
        this.curSwiper = e.detail.current + 1;
      },
      /**
       * @description  获取地址
       */
      loadAddress() {
        this.$api.post(global.apiUrls.getUserAddressAddressList).then((res) => {
          console.log("地址列表", res);
          if (res.data.code == 1) {
            this.addrs = res.data.data;
          }
        });
      },
      /**
       * @description tab栏切换  通过滚动事件 滚动到指定的高度
       * @param {Object} item id:导航id
       */
      changeTab(item) {
        this.curTab = item.id;
        let nowScrollTop = this.scrollTop;
        uni
          .createSelectorQuery()
          .in(this)
          .select("." + item.id)
          .boundingClientRect((pos) => {
            let posTop = pos.top;
            if (posTop == 0 && nowScrollTop != 0) return;
            uni.pageScrollTo({
              duration: 0,
              scrollTop: posTop + nowScrollTop - 100 - this.StatusBar,
            });
          })
          .exec();
      },
      /**
       * @description 打开弹窗
       * @param {Object} type  打开那个弹出框
       */
      openPopup(type) {
        this.$refs[type].open();
      },
      /**
       * @description  获取商品详情
       */
      loadData() {
        this.$api
          .get(global.apiUrls.getGoodsDetail, {
            goods_id: this.goods_id,
            is_cache: 1,
            activity_id: this.activity_id,
            user_id: (global.userInfo && global.userInfo.id) || 0,
          })
          .then((res) => {
            if (res.data.code == 1) {

              console.log("goods detail", res.data.data);

              let data = res.data.data;
              this.swipers = data.images;
              // 提取  商品基本信息  用于分享
              this.is_pure_integral = data.is_pure_integral
              this.goodsInfo = {
                praise_rate:data.praise_rate,
                is_pure_integral: data.is_pure_integral,
                sales_integral: data.sales_integral,
                shop_price: data.shop_price,
                name: data.name,
                price: data.shop_price,
                activity_price: data.activity_price,
                market_price: data.market_price,
                thumb: data.thumb,
                description: data.description,
                is_collect: data.is_collect,
                number: 1,
                stock: data.activity_stock || data.stock || 0,
                totalStock: data.activity_stock || data.stock || 0,
                sales_sum: data.sales_sum || 0,
                is_spec: data.is_spec,
                user_score: this.user_score,
                freight_price: data.freight_price,
              };

              if (data.freight_explain) {
                this.freight_explain = data.freight_explain.replace(/\n/g, "<br/>");
              }
              this.explain_title = data.freight_name;
              this.limit = data.limit || 0;
              this.body = richText.format(data.body);
              this.comment = data.comment || [];
              this.comment_total = data.comment_total || 0;
              //判断商品规格
              if (data.is_spec == 1) {
                this.spec_list = data.activity_spec_list;
                this.sku_list = Object.values(data.activity_sku_list)
                  .map((item) => {
                    item.sku_spec = item.key.split("_");
                    return item;
                  })
                  .filter((item) => {
                    return item.stock > 0;
                  });
              }
              if (data.activity_info && data.activity_info.activity_type != 0) {
                this.initDownTime(data.activity_info.surplus_time);
              }
              uni.stopPullDownRefresh();
              this.$nextTick(() => {
                this.computedPosTop();
                if (data.is_spec == 1) {
                  setTimeout(() => {
                    this.$refs.specs.init();
                  }, 100)
                }
              });


              this.selectAll = {
                is_pure_integral: res.data.data.is_pure_integral,
                sales_integral: res.data.data.sales_integral,
                shop_price: res.data.data.shop_price,
                stock: res.data.data.stock,
                activity_price: data.activity_price,
                market_price: data.market_price,
              }


              console.log("goodsInfo", this.goodsInfo, this.selectAll, 8888888);

            } else {
              this.$message.info(this.i18n["获取详情失败"]);
              setTimeout(() => {
                uni.navigateBack();
              }, 300);
            }
          });
      },
      /**
       * @description  初始化倒计时
       * @param {Object} time   距离活动结束还有多久
       */
      initDownTime(time) {
        time = Number(time);
        if (time > 0) {
          console.log('aaa', time);
          let timeInfo = this.$util.downTime(time * 1000);
          this.downInfo = {
            title: this.i18n['据秒杀结束仅剩'],
            days: timeInfo.days,
            hours: timeInfo.hours,
            minutes: timeInfo.minutes,
            seconds: timeInfo.seconds,
          }
        }
      },
      /**
       * @description  计算锚点位置
       */
      computedPosTop() {
        const query = uni.createSelectorQuery().in(this);
        this.tabs.forEach((item, index) => {
          query.select('#' + item.id).boundingClientRect(data => {
            this.$set(this.tabs[index], 'top', data.top);
          }).exec();
        })
      },
      /**
       * @description  收藏
       */
      collect() {
        this.$util.actionAuth(() => {
          this.$api
            .post(global.apiUrls.postGoodsCollection, {
              collect_id: this.goods_id,
              sku_id: this.sku_id,
              collect_title: this.goodsInfo.name,
              type: 1,
            })
            .then((res) => {
              if (res.data.code == 1) {
                console.log("collect", res.data);
                if (this.goodsInfo.is_collect) {
                  this.goodsInfo.is_collect = 0;
                } else {
                  this.goodsInfo.is_collect = 1;
                }
                this.$message.info(res.data.msg);
              }
            });
        });
      },
      /**
       * @description 修改购买数量
       * @param {Object} num 改变数据 用于 直接改变数据
       */
      setNumber(num) {
        this.goodsInfo.number = num;
      },
      /**
       * @description  修改购买规格
       * @param {Object} skuInfo 获取选取规格后的 名称 字段 价格 id  等信息
       */
      setSpec(skuInfo) {
        console.log('选择规格skuInfo', skuInfo)
        this.selectAll = skuInfo
        const {
          key_name,
          shop_price,
          market_price,
          sku_id,
          stock
        } = skuInfo;
        this.sku_id = sku_id;
        this.sku_name = key_name;
        this.goodsInfo.price = shop_price;
        this.goodsInfo.stock = stock;
      },
      /**
       * @description 立即兑换
       */
      buyNow() {
        this.$util.actionAuth(() => {
          if (this.goodsInfo.stock == 0) return this.$message.info(this.i18n['该商品暂无库存']);
          if (this.addrs.length == 0) {
            this.$message.info(this.i18n['请先添加收货地址']);
            setTimeout(() => {
              this.$urouter.navigateTo({
                url: '/pages/address/address-list/index',
                params: {
                  type: 1,
                  id: 0
                }
              });
            }, 800)
            return;
          }
          let data = {
            goods_id: this.goods_id,
            number: this.goodsInfo.number,
            dataSource: 1,
          };
          if (this.sku_id) {
            data.sku_id = this.sku_id;
          }
          if (this.curAddr) {
            data.address_id = this.curAddr.address_id;
          }
          if (this.activity_id) {
            data.activity_id = this.activity_id;
          }
          this.$urouter.navigateTo({
            url: "/pages/integral/integral-order-process/confirm-order/index",
            params: data,
          });
        });
      },
      /**
       * @description 选择地址
       */
      switchAddress(num) {
        this.$util.actionAuth(() => {
          if (num > 0) {
            this.openPopup("address");
          } else {
            this.$urouter.navigateTo({
              url: '/pages/address/address-list/index',
              params: {
                type: 1,
                id: 0
              }
            });
          }

        });
      },
      /**
       * @description 去评价列表
       */
      navToComment() {
        if (this.comment_total == 0)
          return this.$message.info(this.i18n["该商品暂无评论"]);
        this.$urouter.navigateTo({
          url: "/pages/goods/goodsdetail/goods-comment/index",
          params: {
            goods_id: this.goods_id,
          },
        });
      },
      /**
       * @description 改变收货地址
       * @param {Object} e 地址信息
       */
      changeAddress(e) {
        this.curAddr = e;
        this.$refs.address.close()
      },
    },

  };
</script>

<style lang="scss" scoped>
  .page {
    min-height: 100%;
    padding-bottom: 100rpx;
    padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  }

  // 图片轮播图 start
  .banners {
    height: 750rpx;
    position: relative;

    .carousel {
      width: 100%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .pagination {
      width: 80rpx;
      height: 40rpx;
      border-radius: 40rpx;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      right: 32rpx;
      bottom: 32rpx;
      line-height: 40rpx;
      font-size: 28rpx;
      text-align: center;
      color: rgba(255, 255, 255, 0.8);
    }
  }

  // 图片轮播图 end
  //悬浮Tab栏 start
  .tabs {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88rpx;
    background-color: #ffffff;
    box-shadow: 0 6rpx 4rpx rgba(0, 0, 0, 0.06);
    display: flex;
    z-index: 999;

    .tab-item {
      height: 100%;
      line-height: 88rpx;
      font-size: 28rpx;
      color: #999999;
      border-bottom: 4rpx solid white;
    }

    .tab-item.active {
      color: #333333;
      font-size: 32rpx;
      border-bottom-color: $fu-main-color;
    }
  }

  //悬浮Tab栏 end
  //价格展示区 start
  .prices {
    height: 112rpx;
    background-color: #ffffff;

    .price-box {
      position: relative;
      top: -20rpx;
      display: flex;

      .left {
        height: 112rpx;
        flex: 1;
        background: #ff2742;
        padding-left: 32rpx;
        display: flex;
        align-items: center;
        border-top-left-radius: 24rpx;
        color: #FFFFFF;
      }

      .right {
        height: 112rpx;
        background-color: #FFECCE;
        background-image: url($IMG_WECHAT_URL+'/integral/price-bg.png');
        background-repeat: no-repeat;
        background-size: contain;
        padding: 0 32rpx 0 80rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-top-right-radius: 24rpx;
      }
    }
  }

  //价格展示区 end
  //商品信息展示区 start
  .infos {
    border-radius: 0 0 20rpx 20rpx;
  }

  //商品信息展示区 end
  //地址 start
  .list-item {
    height: 112rpx;
    line-height: 112rpx;
    display: flex;

    .title {
      width: 100rpx;
      min-width: 100rpx;
      font-size: 32rpx;
      color: #333333;
      font-weight: bold;
    }

    .content {
      flex: 1;
      display: flex;
       justify-content: space-between;
      overflow: hidden;

      .mes {
        // flex: 1;
      }

      .icon {
        width: 50rpx;
        min-width: 50rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }

  .font-size-weight {
    font-size: 35rpx;
  }

  //地址 end
  // 评价展示区 start
  .evaluates {
    .title {
      height: 100rpx;
    }
  }

  // 评价展示区 end
  // 商品详情 start
  .details {
    .title {
      height: 120rpx;
      font-size: 40rpx;
      color: #333333;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;

      .icon {
        width: 60rpx;
        height: 28rpx;
        background-size: contain;
        background-repeat: no-repeat;
      }

      .icon1 {
        background-image: url($IMG_WECHAT_URL+"/integral/left-pic.png");
      }

      .icon2 {
        background-image: url($IMG_WECHAT_URL+"/integral/right-pic.png");
      }
    }
  }

  // 商品详情 end
  .radius-20 {
    border-radius: 20rpx;
  }

  .word-break-all {
    word-break: break-all;
  }

  .bg-theme {
    background: $fu-main-color;
    color: #fff;
  }

  .bottoms {
    height: 55rpx;
    font-size: 25rpx;
    background: $bgtheme!important;
  }

  .nobottoms {
    height: 55rpx;
    font-size: 25rpx;
    background-color: #9B989C;
    color: white;

  }

  // 底部栏  start

  .bottom-action {
    position: fixed;
    left: 32rpx;
    right: 32rpx;
    bottom: 32rpx;
    bottom: calc(32rpx + constant(safe-area-inset-bottom));
    bottom: calc(32rpx + env(safe-area-inset-bottom));
  }

  // 底部栏  end

  // 数量弹窗  start
  .safearea {
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  // 数量弹窗  end
  .share-btn {
    padding-right: 26rpx;
  }

  .share-btn image {
    width: 34rpx;
    height: 34rpx;
  }
</style>
